<template>
  <div class="problem_transfer">
    <el-dialog
      title="问题转签"
      :visible.sync="dialogVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="conclude_info">
        <p>周转码：<span>{{turnoverNumber}}</span></p>
        <p>发起工序：<span>{{workstageName}}</span></p>
        <p>发起人：<span>{{submitterName}}</span></p>
      </div>
      <div class="transfer">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" v-if="dialogVisible">
          <el-form-item label="" prop="transferDescription">
            <el-input
              type="textarea"
              placeholder="请输入问题转签描述"
              rows="7"
              resize="none"
              v-model.trim="ruleForm.transferDescription"
              maxlength="255"></el-input>
            <span
              class="text_length">{{ruleForm.transferDescription ? ruleForm.transferDescription.length : 0}}/255</span>
          </el-form-item>
          <div class="selects">
            <el-form-item class="problem_types" label="问题类型：" prop="problemTypeId">
              <el-select v-model="ruleForm.problemTypeId" size="small" placeholder="请选择" value="">
                <el-option
                  v-for="item in problemTypes"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="handler_id" label="转签至：" prop="handlerId">
              <el-select v-model="ruleForm.handlerId" size="small" placeholder="请选择" value="">
                <el-option
                  v-for="item in handler"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="mes_btn">
        <el-button type="primary" @click="handleSubmit">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProblemTransfer',
  data() {
    return {
      dialogVisible: false,
      listId: '', // 列表ID,
      handleStatusId: '', // 处理状态ID
      turnoverNumber: '', // 周转码
      workstageName: '', // 发起工序
      submitterName: '', // 发起人
      ruleForm: {
        transferDescription: '', // 问题描述
        problemTypeId: '', // 问题类型ID
        handlerId: '', // 处理人ID
      },
      rules: {
        problemTypeId: [
          {required: true, message: '请选择问题类型', trigger: 'change'}
        ],
        handlerId: [
          {required: true, message: '请选择提交至', trigger: 'change'}
        ],
        transferDescription: [
          {max: 255, message: '问题转签描述不能超过255个字符', trigger: 'blur'}
        ]
      },
    }
  },
  computed: {
    // 问题类型
    problemTypes() {
      return this.$store.state.dict.workstageProblemType.labels || []
    },
    // 转签处理人
    handler() {
      return this.$store.state.problemProcess.handler
    }
  },
  methods: {
    /**
     * 显示弹窗并接收传值
     */
    openDialog(data) {
      this.dialogVisible = true
      this.listId = data[0].id
      this.handleStatusId = data[0].handleStatusId
      this.ruleForm.problemTypeId = data[0].problemTypeId
      this.turnoverNumber = data[0].turnoverNumber
      this.workstageName = data[0].workstageName
      this.submitterName = data[0].submitterName
      this.ruleForm.handlerId = '' // 清空转签人的值
      this.ruleForm.transferDescription = '' // 清空描述信息
      this.getHandler()
    },
    // 获取工艺师
    getHandler() {
      let commitObj = {
        method: 'get',
        url: 'a/workstageproblemprocess/workstageProblemProcess/listtechnologist',
        module: 'problemProcess',
        state: 'handler'
      }
      this.$store.dispatch('saveData', commitObj)
    },
    // 提交
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitProblemType()
        }
      })
    },
    // 问题转签参数
    submitProblemType() {
      let commitObj = {
        method: 'post',
        url: 'a/workstageproblemprocess/workstageProblemProcess/transferProblemProcess',
        data: {
          id: this.listId,
          handleStatusId: this.handleStatusId,
          transferDescription: this.ruleForm.transferDescription,
          problemTypeId: this.ruleForm.problemTypeId,
          handlerId: this.ruleForm.handlerId,
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', commitObj).then(() => {
        this.$emit('submitSuccess')
        this.tipMessage('success', '转签成功')
        this.dialogVisible = false
      })
    },
    /**
     * 提示
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .problem_transfer {
    .mes_dialog {
      width: 600px;
    }

    .transfer {
      padding: 20px;

      .el-textarea {
        position: relative;
        border: 1px solid #dbe1e8;
        padding-bottom: 20px;
        border-radius: 2px;

        .el-textarea__inner,
        .el-form-item.is-success .el-textarea__inner {
          border: none !important;
        }
      }

      .text_length {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        line-height: 20px;
        text-align: right;
        padding-right: 5px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #7e8e9f;
        font-size: 12px;
      }

      .selects {
        display: flex;

        .el-form-item__content {
          width: 332px;
        }

        .el-select {
          width: 160px;
        }

        .problem_types, .handler_id {
          .el-form-item__label {
            padding: 0;
          }

          margin-bottom: 0;
        }
      }
    }

    .conclude_info {
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;
      background-color: #ebf0f6;
      height: 40px;
      line-height: 40px;
    }

    .el-dialog__body {
      padding: 0 !important;
    }

    .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus {
      border: none !important;
    }
  }
</style>
